<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="header">
			<text class="title">实名认证</text>
			<text class="subtitle">请填写真实信息进行身份验证</text>
		</view>

		<!-- 认证表单 -->
		<view class="verify-form">
			<!-- 真实姓名 -->
			<view class="form-item">
				<text class="label">真实姓名</text>
				<input 
					class="input" 
					v-model="formData.realName" 
					placeholder="请输入您的真实姓名"
					maxlength="20"
				/>
			</view>

			<!-- 身份证号 -->
			<view class="form-item">
				<text class="label">身份证号</text>
				<input 
					class="input" 
					v-model="formData.idCard" 
					placeholder="请输入18位身份证号码"
					maxlength="18"
					type="idcard"
				/>
			</view>

			<!-- 人脸识别 -->
			<view class="form-item">
				<text class="label">人脸识别</text>
				<view class="face-section">
					<view v-if="!faceImage" class="face-upload" @tap="startFaceRecognition">
						<uni-icons type="camera" size="40" color="#007AFF" />
						<text class="upload-text">点击进行人脸识别</text>
						<text class="upload-hint">请确保光线充足，面部清晰</text>
					</view>
					<view v-else class="face-preview">
						<image class="face-image" :src="faceImage" mode="aspectFill" />
						<view class="face-actions">
							<uni-button size="mini" type="default" @tap="retakePhoto">重新拍摄</uni-button>
							<uni-button size="mini" type="primary" @tap="startFaceRecognition">重新识别</uni-button>
						</view>
					</view>
				</view>
			</view>

			<!-- 认证状态 -->
			<view v-if="verifyStatus" class="status-section">
				<view class="status-item" :class="{ success: verifyStatus.faceVerified, error: !verifyStatus.faceVerified }">
					<uni-icons :type="verifyStatus.faceVerified ? 'checkmarkempty' : 'close'" size="16" 
						:color="verifyStatus.faceVerified ? '#52c41a' : '#ff4d4f'" />
					<text class="status-text">人脸识别{{ verifyStatus.faceVerified ? '通过' : '未通过' }}</text>
				</view>
				<view class="status-item" :class="{ success: verifyStatus.idCardVerified, error: !verifyStatus.idCardVerified }">
					<uni-icons :type="verifyStatus.idCardVerified ? 'checkmarkempty' : 'close'" size="16" 
						:color="verifyStatus.idCardVerified ? '#52c41a' : '#ff4d4f'" />
					<text class="status-text">身份证验证{{ verifyStatus.idCardVerified ? '通过' : '未通过' }}</text>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<uni-button 
				type="primary" 
				:disabled="!canSubmit" 
				@tap="submitVerification"
				class="submit-btn"
			>
				{{ submitText }}
			</uni-button>
		</view>

		<!-- 提示信息 -->
		<view class="tips">
			<text class="tips-title">认证说明：</text>
			<text class="tips-item">• 请确保填写的信息与身份证信息完全一致</text>
			<text class="tips-item">• 人脸识别时请保持面部清晰，避免遮挡</text>
			<text class="tips-item">• 认证信息仅用于身份验证，我们将严格保护您的隐私</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, watch } from 'vue';

	// 表单数据
	const formData = ref({
		realName: '',
		idCard: ''
	});

	// 人脸识别图片
	const faceImage = ref('');

	// 认证状态
	const verifyStatus = ref({
		faceVerified: false,
		idCardVerified: false
	});

	// 提交状态
	const isSubmitting = ref(false);

	// 计算属性：是否可以提交
	const canSubmit = computed(() => {
		return formData.value.realName.trim() && 
			   formData.value.idCard.trim() && 
			   faceImage.value && 
			   !isSubmitting.value;
	});

	// 计算属性：提交按钮文字
	const submitText = computed(() => {
		if (isSubmitting.value) return '认证中...';
		return '提交认证';
	});

	// 开始人脸识别
	const startFaceRecognition = () => {
		// 前端实现：调用相机或相册
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['camera'],
			success: (res) => {
				faceImage.value = res.tempFilePaths[0];
				// 调用人脸识别接口
				verifyFace(res.tempFilePaths[0]);
			},
			fail: () => {
				uni.showToast({
					title: '拍照失败，请重试',
					icon: 'none'
				});
			}
		});
	};

	// 重新拍摄
	const retakePhoto = () => {
		faceImage.value = '';
		verifyStatus.value.faceVerified = false;
	};

	// 人脸识别验证
	const verifyFace = (imagePath: string) => {
		uni.showLoading({ title: '人脸识别中...' });
		
		// ========== 前端人员：这里需要后端实现接口 ==========
		// 接口地址：POST /api/verify/face
		// 请求参数：
		// {
		//   "image": "base64编码的图片数据",
		//   "realName": "真实姓名",
		//   "idCard": "身份证号"
		// }
		// 返回数据：
		// {
		//   "success": true,
		//   "message": "人脸识别成功",
		//   "data": {
		//     "verified": true,
		//     "confidence": 0.95,
		//     "faceInfo": {
		//       "age": 25,
		//       "gender": "male"
		//     }
		//   }
		// }
		// ========== 后端人员：请实现以上接口 ==========
		
		// 模拟接口调用
		setTimeout(() => {
			uni.hideLoading();
			// 模拟验证结果
			verifyStatus.value.faceVerified = Math.random() > 0.3; // 70%成功率
			
			if (verifyStatus.value.faceVerified) {
				uni.showToast({
					title: '人脸识别成功',
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: '人脸识别失败，请重试',
					icon: 'none'
				});
			}
		}, 2000);
	};

	// 身份证号验证
	const validateIdCard = (idCard: string) => {
		// 简单的身份证号格式验证
		const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		return reg.test(idCard);
	};

	// 监听身份证号变化，进行实时验证
	const validateIdCardRealTime = () => {
		if (formData.value.idCard.length === 18) {
			// ========== 前端人员：这里需要后端实现接口 ==========
			// 接口地址：POST /api/verify/idcard
			// 请求参数：
			// {
			//   "idCard": "身份证号",
			//   "realName": "真实姓名"
			// }
			// 返回数据：
			// {
			//   "success": true,
			//   "message": "身份证验证成功",
			//   "data": {
			//     "verified": true,
			//     "cardInfo": {
			//       "name": "张三",
			//       "gender": "男",
			//       "birthday": "1995-01-01",
			//       "address": "北京市朝阳区"
			//     }
			//   }
			// }
			// ========== 后端人员：请实现以上接口 ==========
			
			// 模拟验证
			setTimeout(() => {
				verifyStatus.value.idCardVerified = validateIdCard(formData.value.idCard);
			}, 1000);
		}
	};

	// 提交认证
	const submitVerification = () => {
		if (!canSubmit.value) return;

		isSubmitting.value = true;
		uni.showLoading({ title: '提交认证中...' });

		// ========== 前端人员：这里需要后端实现接口 ==========
		// 接口地址：POST /api/verify/submit
		// 请求参数：
		// {
		//   "realName": "真实姓名",
		//   "idCard": "身份证号",
		//   "faceImage": "base64编码的人脸图片",
		//   "faceVerified": true,
		//   "idCardVerified": true
		// }
		// 返回数据：
		// {
		//   "success": true,
		//   "message": "认证提交成功",
		//   "data": {
		//     "verifyId": "VERIFY_20240101_001",
		//     "status": "pending",
		//     "estimatedTime": "1-2个工作日"
		//   }
		// }
		// ========== 后端人员：请实现以上接口 ==========

		// 模拟提交
		setTimeout(() => {
			uni.hideLoading();
			isSubmitting.value = false;
			
			uni.showModal({
				title: '认证提交成功',
				content: '您的实名认证信息已提交，我们将在1-2个工作日内完成审核，请耐心等待。',
				showCancel: false,
				success: () => {
					// 返回上一页
					uni.navigateBack();
				}
			});
		}, 2000);
	};

	// 监听身份证号变化
	watch(() => formData.value.idCard, validateIdCardRealTime);
</script>

<style>
	page {
		background-color: #f5f6fa;
	}

	.container {
		padding: 30rpx;
		min-height: 100vh;
	}

	.header {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 24px;
		font-weight: 700;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 14px;
		color: #666;
	}

	.verify-form {
		background: #ffffff;
		border-radius: 16px;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.label {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.input {
		width: 100%;
		height: 80rpx;
		border: 1px solid #e0e0e0;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 16px;
		color: #333;
		background-color: #fafafa;
	}

	.face-section {
		margin-top: 15rpx;
	}

	.face-upload {
		border: 2rpx dashed #007AFF;
		border-radius: 12rpx;
		padding: 60rpx 30rpx;
		text-align: center;
		background-color: #f8f9ff;
	}

	.upload-text {
		font-size: 16px;
		color: #007AFF;
		font-weight: 500;
		margin: 20rpx 0 10rpx;
		display: block;
	}

	.upload-hint {
		font-size: 12px;
		color: #999;
	}

	.face-preview {
		border: 1px solid #e0e0e0;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.face-image {
		width: 100%;
		height: 300rpx;
		background-color: #f5f5f5;
	}

	.face-actions {
		display: flex;
		gap: 20rpx;
		padding: 20rpx;
		justify-content: center;
	}

	.status-section {
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1px solid #f0f0f0;
	}

	.status-item {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 15rpx;
		padding: 15rpx;
		border-radius: 8rpx;
	}

	.status-item.success {
		background-color: rgba(82, 196, 26, 0.1);
	}

	.status-item.error {
		background-color: rgba(255, 77, 79, 0.1);
	}

	.status-text {
		font-size: 14px;
		color: #333;
	}

	.submit-section {
		margin-bottom: 30rpx;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		font-size: 18px;
		font-weight: 600;
	}

	.tips {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.tips-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.tips-item {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 8rpx;
		display: block;
	}
</style>
